<template>
	<view class="contener">
		<view>
			<u-modal :show="parentShow" closeOnClickOverlay showCancelButton width="490rpx" height="420rpx"
				negativeTop="200">
				<view class="slot-content">
					<view>
						<u--image :src="parentAvatar" mode="aspectFit" width="80px" height="80px" shape="circle">
						</u--image>
					</view>
					<view style="display: flex;">
						<text style="margin: auto;margin-top: 12rpx;">{{parentNick}}</text>
					</view>
				</view>
				<u-button @click="parentShow = false" slot="confirmButton" text="确定" type="success" shape="circle">好的
				</u-button>
			</u-modal>
		</view>
		<skeleton :skeleton="skeleton" round :loading="loading">
			<block>
				<!-- 登录 -->
				<view class="box"></view>
				<!-- <view class="headTitle"><text>个人中心</text></view> -->
				<view class="loginBox">
					<view class="contener700 between center_vertical">

						<view class="xinxi center_vertical">
							<image class="avatarUrl" :src="avatarUrl"></image>
							<view class="name">{{nickName}}
								<view class="name-iphone" v-if="iphone">电话: {{iphone}}</view>
							</view>
						</view>
						<view v-if="parent">
							<u-button type="default" :plain="true" text="查看推荐人" size="small" :hairline="true"
								color="#fff" shape="circle" @click="parentShow=true">
							</u-button>
						</view>
					</view>
				</view>
				<view class="orderBox" v-if="!iphone">
					<view class="oredrIphone">
						<view class="iphoneTit">绑定手机号码，保障账户安全：</view>
						<button type="primary" size="mini" @tap="goPage('./phone')">点击绑定</button>
					</view>
				</view>
				<!-- 三订单 -->
				<view class="orderBox">
					<view class="oredr" style="margin-top: -30rpx;">
						<view class="oredrchidern" @tap="goPage('/pageA/mine/bulkOrder')">
							<view style="position: relative;">
								<text class="iconfont icon-pintuankaituancantuan topIcon"></text>
								<view class="badgeBox">
									<u-badge :type="groupNoticeType" max="99" :value="groupNoticeCount"></u-badge>
								</view>
							</view>
							<view class="oredrText">
								团购订单
							</view>
						</view>
						<view v-if="$appConfig.VEGETABLE_ENABLE" class="oredrchidern" @tap="goPage('./order')">
							<view>
								<text class="iconfont icon-xuanzezhongzhizuowu topIcon"></text>
							</view>"
							<view class="oredrText">
								摘种订单
							</view>
						</view>
						<view  class="oredrchidern" @tap="goPage('./rentOrder')" v-if="hasRent==0 && $appConfig.VEGETABLE_ENABLE">
							<view>
								<text class="iconfont icon-jihuatudigongyingjihua topIcon"
									style="font-size: 50rpx !important;"></text>
							</view>
							<view class="oredrText">
								租赁订单
							</view>
						</view>
            <view class="oredrchidern" @tap="goPage('./activity/list')" v-if="$appConfig.VEGETABLE_ENABLE">
              <view>
                <view class="iconfont topIcon" style="text-align: center;">
                  <view style="display: inline-block;vertical-align:middle;">
                    <u-icon
                        color="#ffffff"
                        name="star-fill"
                        size="30"
                    >
                    </u-icon>
                  </view>

                </view>

              </view>
              <view class="oredrText">
                活动记录
              </view>
            </view>


            <!-- <view class="oredrchidern" @tap="goPage('../afterSales/returnOrder')">
              <view>
                <text class="iconfont icon-tuikuanshouhou topIcon" ></text>
              </view>
              <view class="oredrText">
                退款/售后
              </view>
            </view> -->
					</view>
				</view>
				<view>
					<u-notice-bar :text="notice" mode="link" url="/pageA/mine/userList"></u-notice-bar>
				</view>
				<!-- 列表 -->
				<view class="orderBox">
					<view class="listbox">
						<view class="list between" @tap="goPage('./phone')">
							<view class="content">
								<text class="iconfont icon-zhanghu" style="color: #3a95ff;"></text>
								<view class="sTitle">
									<text>我的账户</text>
								</view>
								<view style="margin-left: auto;">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</view>
						<view class="list between" @tap="tzmerchants" v-if="hasMerchant==0">
							<view class="content">
								<text class="iconfont icon-jiamen" style="color: #ff6040;"></text>
								<view class="sTitle">
									<text>商家入驻</text>
								</view>
								<view style="margin-left: auto;">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</view>
						<view class="list between" @tap="getaddress">
							<view class="content">
								<text class="iconfont icon-dizhiguanli" style="color: #ffb400;"></text>
								<view class="sTitle">
									<text>收货地址</text>
								</view>
								<view style="margin-left: auto;">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</view>
					<!-- 	<view class="list between" @tap="goPage('../index/index')" v-if="hasRent==0">
							<view class="content">
								<text class="iconfont icon-zulinzhongxin" style="color: #1abc9c;"></text>
								<view class="sTitle">
									<text>田地出租</text>
								</view>
								<view style="margin-left: auto;">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</view> -->
						<view class="list between" @tap="merchantsBack" v-if="hasJoin==0">
							<view class="content">
								<text class="iconfont icon-shangjia1" style="color: #70a1ff;"></text>
								<view class="sTitle">
									<text>商家后台</text>
								</view>
								<view style="margin-left: auto;">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</view>
						<view class="list between" @tap="goPage('/pageA/mine/messageList')" v-if="hasJoin==0">
							<view class="content">
								<view style="position: relative;">
									<text class="iconfont icon-xiaoxi1" style="color: #ff6040;"></text>
									<view style="position: absolute;bottom: 31rpx;left: 34rpx">
										<u-badge type="error" max="99" :value="msgCount" shape="horn" v-show="msgShow">
										</u-badge>
									</view>
								</view>
								<view class="sTitle"><text>消息中心</text></view>
								<view style="margin-left: auto;">
									<uni-icons type="forward" size="20"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;">
					<button type="default" open-type="contact" size="mini" class="btn">在线客服</button>
				</view>
				<view style="display: flex;">
					<text space="emsp"
						style="color: #adadad;font-size: 20rpx;margin: auto;margin-top: 30rpx;">本平台最终解释权归</text>
				</view>
				<view style="display: flex;">
					<text space="emsp" style="color: #adadad;font-size: 20rpx;margin: auto;">我的农场（中山）有限公司所有</text>
				</view>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import service from "@/utils/service";
	export default {
		components: {
			Skeleton,
		},
		data() {
			return {
				groupNoticeCount: "0",
				groupNoticeType: "success",
				notice: "现在在任意页面点击右上角页面分享小程序给好友，好友入驻成为商家后，除了他可以赚钱，你也可以得到佣金，多劳夺得，快去邀请吧！(具体规则请点击该条公告或到我的账户-推广中心处查看)",
				msgShow: false,
				msgCount: 0,
				parent: false,
				parentAvatar: "",
				parentNick: "",
				parentShow: false,
				hasMerchant: 0,
				//是否显示租赁入口
				hasRent: 0,
				//是否显示商家入驻入口
				hasJoin: 0,
				avatarUrl: '',
				nickName: '请登录',
				sessionKey: '',
				loginbtnshow: true,
				api: '',
				imgSrc: "../../static/images/mine/icon_next.png",
				loading: true,
				skeleton: [
					'square+line+square',
					40,
					'square+square+square',
					40,
					'line*5'

				], //骨架屏
				iphone: '',
			}
		},
		onLoad(e) {
			this.parentAvatar = wx.getStorageSync('parentAvatar')
			this.parentNick = wx.getStorageSync('parentNick')
			if (this.parentAvatar && this.parentNick) {
				this.parent = true
			}
			this.api = this.$reqConfig.UPLOADAPI
			// 骨架屏取消
			this.loading = false;
		},
		onShow() {
			this.iphone = uni.getStorageSync('iphone')
			const token = wx.getStorageSync('token')
			const avatar = wx.getStorageSync('avatarUrl')
			if (token && avatar) {
				const nickName = wx.getStorageSync('nickName')
				const avatarUrl = wx.getStorageSync('avatarUrl')
				this.avatarUrl = avatarUrl
				this.nickName = nickName
				this.loginbtnshow = false
			} else {
				uni.navigateTo({
					url: `/pages/mine/loginPage`
				})
			}
			this.getAudit()
			this.getMsg()
			this.mineNotice()
		},
		methods: {
			mineNotice() {
				this.$axios({
					url: `user/info/mineNotice`,
					method: "post"
				}).then(res => {
					if (this.$comm.checkNull(res.result.sendGroupOrder) && res.result.sendGroupOrder != 0) {
						console.log("123: ", 123);
						this.groupNoticeCount = res.result.sendGroupOrder
						this.groupNoticeType = "error"
					}
					if (this.$comm.checkNull(res.result.refundGroupOrder) && res.result.refundGroupOrder != 0) {
						console.log("456: ", 456);
						this.groupNoticeCount = res.result.refundGroupOrder
						this.groupNoticeType = "warning"
					}
				})
			},
			getMsg() {
				this.$axios({
					url: `user/info/unRead`,
					method: "post"
				}).then(res => {
					this.msgShow = res.result != 0
					this.msgCount = res.result


				})
			},
			//微信审核用接口
			getAudit() {
				//请求
				this.$axios({
					url: `user/info/auditStatus`,
					method: "post"
				}).then(res => {
					this.hasJoin = res.result.hasJoin
					this.hasRent = res.result.hasRent
					this.hasMerchant = res.result.hasMerchant				
				})
			},
			merchantsBack() {
				let {
					token
				} = uni.getStorageSync('merchantsToken')
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '检测到商家登录失效，是否前往登录？',
						confirmText: "商家登录",
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '../../merchant/merchantsLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');

							}
						}
					});
				} else {
					uni.navigateTo({
						url: '../../merchant/merchantsDetail'
					})
				}
			},
			//点击自提二维码
			richScan() {
				uni.scanCode({
					scanType: ["qrCode"],
					success(res) {
						console.log("扫码成功: ", res);
						/* 
						 charSet: "utf-8"
						 codeVersion: 3
						 errMsg: "scanCode:ok"
						 rawData: "b2Ny5paH5a2X6K+G5Yir"
						 result: "ocr文字识别"
						 scanType: "QR_CODE"
						 */
					},
					fail(err) {
						console.log("扫码失败: ", err);
					}
				})
			},
			//登录
			login() {
				console.log("请求登录")
				wx.login({
					success: res => {
						// 发送 res.code 到后台换取 openId, sessionKey, unionId
						if (res.code) {
							console.log("成功获取到code")
							let code = res.code;
							wx.setStorage({
								key: "code",
								data: code
							})
							//发起网络请求
							let that = this
							wx.request({
								method: "GET",
								url: this.api + '/wx/ma/user/public/login',
								data: {
									"code": code,
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								},
								success(res) {
									that.sessionKey = res.data.sessionKey;
									if (res.data.token) {
										wx.setStorage({
											key: 'token',
											data: res.data.token
										})
									}
								},
							})
						}
					}
				})
				let that = this
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.$axios({
							url: "/wx/ma/user/info",
							data: {
								"encryptedData": res.encryptedData,
								"iv": res.iv,
								"rawData": res.rawData,
								"signature": res.signature,
								"sessionKey": that.sessionKey
							}
						}).then((res) => {
							this.iphone = res.result
							uni.setStorageSync('iphone', res.result);
							uni.navigateTo({
								url: './mineInfo'
							})
						})

						console.log("获取用户信息")
						this.avatarUrl = res.userInfo.avatarUrl
						this.nickName = res.userInfo.nickName
						wx.setStorage({
							key: 'nickName',
							data: res.userInfo.nickName
						})
						wx.setStorage({
							key: 'avatarUrl',
							data: res.userInfo.avatarUrl
						})
						//存储对象
						uni.setStorage({
							key: 'infoObj',
							data: {
								"encryptedData": res.encryptedData,
								"iv": res.iv,
								"rawData": res.rawData,
								"signature": res.signature,
								"sessionKey": this.sessionKey
							}
						});

						this.loginbtnshow = false
					}
				})

			}, //登出
			logout() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('avatarUrl')
				uni.removeStorageSync('nickName')
				uni.removeStorageSync('iphone')
				this.nickName = '名字'
				this.avatarUrl = ''
				this.loginbtnshow = true
				this.iphone = ''
			},
			tzmerchants() {
				this.$axios({
					url: `user/info/hasInfo`,
					method: "post"
				}).then(res => {
					console.log('asdfsadfs');
					if (res.result == false) {
						uni.navigateTo({
							url: './phone?type=1'
						})
					} else {
						uni.navigateTo({
							url: './merchants'
						})
					}
					console.log('111111111111', res)
				})

			},

			getaddress() {
				wx.chooseAddress({
					success(res) {						
					}
				})
			},

			goPage(url) {
				console.log(url);
				uni.navigateTo({
					url
				})
			},
		},


	}
</script>

<style scoped lang="scss">
	.btn {
		color: #fff;
		width: 100%;
		height: 100rpx;
		background-color: #46c828;
		line-height: 100rpx;
	}

	/deep/.u-button--plain.data-v-2bf0e569 {
		background-color: #fff0
	}

	.topIcon {
		background-color: #4cda64;
		display: inline-block;
		width: 80rpx;
		line-height: 44px;
		height: 80rpx;
		border-radius: 50%;
		margin-bottom: 16rpx;
		font-size: 40rpx !important;
		color: #fff;
	}

	.iconfont {
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.imgIcon {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
		vertical-align: sub;
	}

	.name-iphone {
		margin-top: 15rpx;
		font-size: 26rpx;
	}

	.box {
		background: linear-gradient(to bottom, #4ccb1d, #2dbb5b);
		position: absolute;
		z-index: -1;
		height: 300rpx;
		width: 100%;
		border-radius: 0 0 70rpx 70rpx;
	}

	.loginBox {
		width: 750rpx;
		height: 200rpx;
		display: flex;
	}

	.loginBtn {
		width: 200rpx;
		font-size: 28rpx;
		/* opacity: value|inherit; */
		color: #fff !important;
		border-radius: 50rpx;
		border-color: #fff !important;
	}

	.avatarUrl {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #fff;
		border: 6rpx solid #c4dfff;
	}

	.name {
		margin-left: 15rpx;
		color: #fff;
		font-weight: 700;
	}

	.xinxi {
		height: 100%;
	}

	/* orederBox */
	.orderBox {
		width: 750rpx;
		margin-bottom: 30rpx;
	}

	.orderBox .iphoneTit {
		font-size: 26rpx;
		color: #2dc85c;
	}

	.orderBox button {
		margin-right: 0;
		height: 55rpx;
		line-height: 55rpx;
		border-radius: 50rpx;
	}

	.orderBox .oredrIphone {
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-between;
		align-items: center;
		width: 700rpx;
		border-radius: 50rpx;
		/* box-shadow: 0 0 3px #888888; */
		margin: -25rpx 25rpx 53rpx 25rpx;
		padding: 0 10rpx 0 20rpx;
		box-sizing: border-box;
		height: 70rpx;
	}

	.oredr {
		width: 700rpx;
		height: 200rpx;
		margin: 0 auto;
		background-color: #FFf;
		border-radius: 25rpx;
		margin-top: -40rpx;
		/* box-shadow: 0 0 3px #888888; */
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.oredrchidern {
		text-align: center;
	}

	.oredrText {
		font-size: 25rpx;
		font-weight: bold;

	}

	.badgeBox {
		position: absolute;
		top: 0rpx;
	}

	.iconOrder {
		width: 100rpx;
		height: 100rpx;
	}

	.listbox {
		width: 700rpx;
		/* height: 400rpx; */
		margin: 0 auto;
		background-color: #FFF;
		border-radius: 25rpx;
		margin-top: 15rpx;
		/* box-shadow: 0 0 3px #888888; */
		padding: 15rpx 0;
	}

	.list {
		width: 95%;
		margin: 30rpx auto;
		height: 30rpx;
		line-height: 30rpx;
		padding-bottom: 35rpx;
		border-bottom: 1rpx solid #eee;
	}

	.icon_next {
		height: 30rpx;
		width: 30rpx;
	}

	.headTitle {
		/* position: absolute; */
		margin-top: 100rpx;
		margin-left: 33rpx;
		margin-bottom: -30rpx;
	}

	.sTitle {
		font-weight: 900;
		font-size: 30rpx;
		margin-left: 15rpx;
	}

	.content {
		display: flex;
		width: 100%;
		padding: 0 10rpx;
	}
</style>
